*,
*:before,
*:after {
	box-sizing: border-box;
}

.toggle {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 90px;
	height: 45px;
	color: white;
	outline: 0;
	text-decoration: none;
	border-radius: 90px;
	border: 2px solid #D0D0D0;
	/*background-color: #0070B4;*/
	-webkit-transition: all 500ms;
	-moz-transition: all 500ms;
	-o-transition: all 500ms;
	transition: all 500ms;
}

.toggle:active {
	background-color: #00B9E8;
}

.toggle:after {
	display: block;
	position: absolute;
	top: -1px;
	left: -1px;
	width: 45px;
	box-shadow: 2px 2px 3px #888888;
	height: 42px;
	line-height: 41px;
	text-align: center;
	text-transform: uppercase;
	font-size: 14px;
	font-family: "微软雅黑";
	color: #D0D0D0;
	background-color: #37474F;
	border: 1px solid;
	-webkit-transition: all 500ms;
	-moz-transition: all 500ms;
	-o-transition: all 500ms;
	transition: all 500ms;
}

.toggle--on:after {
	content: '单次';
	border-radius: 45px;
	color: #999999;
	background-color: #FFFFFF;
}

.toggle--off:after {
	content: '重复';
	border-radius: 45px;
	color: #0070B4;
	-webkit-transform: translate(100%, 0);
	-moz-transform: translate(100%, 0);
	-o-transform: translate(100%, 0);
	transform: translate(100%, 0);
	background-color: #FFFFFF;
}

.toggle--moving {
	background-color: #1c2429;
}

.toggle--moving:after {
	color: transparent;
	border-color: #435862;
	background-color: #FFFFFF;
	-webkit-transition: color 0s, transform 500ms, border-radius 500ms, background-color 500ms;
	-moz-transition: color 0s, transform 500ms, border-radius 500ms, background-color 500ms;
	-o-transition: color 0s, transform 500ms, border-radius 500ms, background-color 500ms;
	transition: color 0s, transform 500ms, border-radius 500ms, background-color 500ms;
}

.bgcQGBlue {
	background-color: #0070B4;
}